@config.main("") {

    <div class="index-box">

        <div class="index-left">

            <h4>Quick Start</h4>

            <div class="index-left-box">
                @imgBox("browse", "Browse", routes.BrowseController.browsePage())
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        <div class="text-no-last">Gene ID | Species | Mobile RNA | </div>
                        <div class="text-no-last">TLS | m<sup>5</sup>C | m<sup>6</sup>A | Adult plant | </div>
                        <div>Vasculature | GWAS SNP | QTL</div>
                    </div>
                </div>
            </div>

            <div class="index-left-box">
                @imgBox("search", "Search", routes.SearchController.searchPosPage())
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        <div class="text-no-last">Gene ID | Species | Mobile RNA | </div>
                        <div class="text-no-last">TLS | m<sup>5</sup>C | m<sup>6</sup>A | Adult plant | </div>
                        <div>Vasculature</div>
                    </div>
                </div>
            </div>

            <div class="index-left-box">
                @imgBox("jbrowse", "JBrowse")
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        <a href="http://cucume.cn:8080/?data=my_data/Cap/Cm/data" target="_blank" class="jbrowse-link">Pumpkin</a> |
                        <a href="http://cucume.cn:8080/?data=my_data/Cap/Cs/data" target="_blank" class="jbrowse-link">Cucumber</a>
                    </div>
                </div>
            </div>

            <div class="index-left-box">
                @imgBox("blast", "Blast", routes.BlastController.blastPage())
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        FASTA | Text | File
                    </div>

                </div>
            </div>

            <div class="index-left-box">
                @imgBox("qtl", "QTL", routes.ToolsController.qtlPage())
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        <div class="text-no-last"> QTL ID | Trait | Chr | Start Position |</div>
                        <div>End Position | Length</div>
                    </div>
                </div>
            </div>

            <div class="index-left-box">
                @imgBox("stat", "Statistics", routes.HomeController.statPage())
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        <div class="text-no-last"> Distribution | Enrichment in QTL |</div>
                        <div> Ratio of Mobile RNA</div>
                    </div>
                </div>
            </div>

            <div class="index-left-box">
                @imgBox("m", "MOTIF", routes.MotifController.motifPage())
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        <div class="text-no-last"> CmGm<sup>5</sup>C | CmGm<sup>6</sup>A | CmVm<sup>5</sup>C |</div>
                        <div class="text-no-last"> CmVm<sup>6</sup>A | CsGm<sup>5</sup>C | CsGm<sup>6</sup>A |</div>
                        <div> CsVm<sup>5</sup>C | CsVm<sup>6</sup>A</div>
                    </div>
                </div>
            </div>

            <div class="index-left-box">
                @imgBox("download", "Download", routes.HomeController.downloadPage())
                <div class="index-left-text-box">
                    <div class="index-left-text">
                        Methylation | Mobile | SNP | QTL
                    </div>
                </div>
            </div>

        </div>

        <div class="index-right">
            <h4>News</h4>

            <div class="index-right-box">
                <div class="index-right-title">
                    <img src="/assets/images/1.png" />
                    <h5>CUCUME：The Cucurbit RNA methylation Database</h5>
                </div>
                <div style="display: flex;">
                    <img src="/assets/images/2.png" />
                    <p>
                        The Database is dedicated to the collection and standardization of data on Cucurbitaceae RNA
                        methylation sites, including m<sup>5</sup>C and m<sup>6</sup>A.
                    </p>
                </div>
            </div>

            <div class="index-right-box">
                <div class="index-right-title">
                    <h5 >MeRIP-seq</h5>
                </div>
                <div style="display: flex;">
                    <p>
                        Methylation sites of total RNA were analyzed and combined in both adult plants of cucumber
                        (<i>Cucumis sativus</i> L. vs.<i>‘Xintai Mici’</i>) and pumpkin (<i>Cucurbita moschata</i> vs.
                            <i>‘Qianglishi’</i> )respectively and vasculature exudation of them by using Methylated RNA
                            Immunoprecipitation sequencing (MeRIP-seq).
                    </p>
                </div>
            </div>

            <div class="index-right-box">
                <div class="index-right-title">
                    <img src="/assets/images/3.png" />
                    <h5>Long-distance mobile mRNAs with methylation sites</h5>
                </div>
                <p>
                        The datasets of mobile mRNAs in cucumber and pumpkin were obtained from publication by using
                        grafting with RNA-sequencing strategy.<a href="" target="_blank">Learn more</a>
                </p>
            </div>

            <div class="index-right-box">
                <div class="index-right-title">
                    <img src="/assets/images/4.png" />
                    <h5>Methylated mRNAs in each cucumber Quantitative trait locus (QTL)</h5>
                </div>
                <p>QTL were obtained from publicated literature, which contains 287 cucumber
                    QTL of 31 quantitative traits. For possible connections, the methylated mRNAs and their methylation
                    sites can be queried separately in each QTL. <a href="" target="_blank">Learn more</a>
                </p>
            </div>

            <div class="index-right-box">
                <div class="index-right-title">
                    <img src="/assets/images/5.png" />
                    <h5>Methylated mRNAs - Single Nucleotide Polymophism (SNP)</h5>
                </div>
                <p>SNP associated with certain agronomical traits were obtained from
                    published references. For possible connections, the SNP locates in methylated mRNAs can be queried.
                    <a href="" target="_blank">Learn more</a>
                </p>
            </div>

        </div>


    </div>


}

@imgBox(icon: String, title: String, href: Call = Call("","javascript:void(0);")) = {
    <a href="@href" >
        <div class="img-box">
            <div class="img">
             @*   <i class="icon @icon"></i>*@
                <img src="/assets/images/home/@{icon}.png" />
            </div>
            <p>@title</p>
        </div>
    </a>
}